<template>
    <div class="child-content">
        <div class="mine-info-label">我的资料</div>
        <div class="info-form">
            <el-form ref="form" :model="formData" size="large" label-width="150px">
                <el-form-item label="用户名称" prop="customerName">
                    <el-input v-model="formData.customerName" disabled placeholder="请输入用户名称" style="width: 400px"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="phoneStr">
                    <el-input v-model="formData.phoneStr" disabled style="width: 400px"></el-input>
                </el-form-item>
                <el-form-item label="会员等级" prop="levelName">
                    <el-input v-model="formData.levelName" disabled style="width: 400px"></el-input>
                </el-form-item>
                <el-form-item label="会员积分" prop="score">
                    <el-input v-model="formData.score" disabled style="width: 400px"></el-input>
                </el-form-item>
                <el-form-item label="邀请码" prop="customerNo">
                    <el-input v-model="formData.customerNo" disabled style="width: 400px"></el-input>
                </el-form-item>
                <el-form-item label="用户身份" prop="customerType">
                    <el-select v-model="formData.customerType" placeholder="请选择" class="self-form-select"
                        style="width: 400px">
                        <el-option :value="item.dictLabel" :label="item.dictLabel" v-for="item in userTypeList"
                            :key="item.dictCode">{{ item.dictLabel }}</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="formData.customerType == '本科在读' || formData.customerType == '专科在读'? '学校和专业': '所在行业'" prop="realRemark">
                    <el-input v-model="formData.realRemark" placeholder="请输入学校和专业" style="width: 400px"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="rvalue">
                    <el-input v-model="formData.rvalue" placeholder="请输入邮箱" style="width: 400px"></el-input>
                </el-form-item>
                <el-form-item label="QQ" prop="rmfLabel">
                    <el-input v-model="formData.rmfLabel" placeholder="请输入QQ" style="width: 400px"></el-input>
                </el-form-item>
                <el-form-item label="注册时间" prop="createTime">
                    <el-input v-model="formData.createTime" disabled style="width: 400px"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="to-submit-btn">
            <el-button type="primary" @click="handleSubmit">保存</el-button>
        </div>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { updateCustomerInfo } from '@/api/login'
import { getMemberType } from '@/api/common'
import useUserStore from '@/store/modules/user'
import { onMounted } from 'vue';
const userStore = useUserStore();

const formData = ref({
    customerName: userStore.user.customerName,
    phoneStr: userStore.user.phoneStr,
    levelName: userStore.user.levelName,
    customerNo: userStore.user.customerNo,
    customerType: userStore.user.customerType,
    score: userStore.user.score,
    realRemark: userStore.user.realRemark,
    rvalue: userStore.user.rvalue,
    rmfLabel: userStore.user.rmfLabel,
    createTime: userStore.user.createTime,
    phone: userStore.user.phone
})
const userTypeList = ref([])
const getUserType = async () => {
    const res = await getMemberType('source_platform')
    if (res) {
        userTypeList.value = res.data
    }
}

const handleSubmit = () => {
    updateCustomerInfo(formData.value).then(res => {
        if (res) {
            ElMessage.success('保存成功')

            setTimeout(() => {
                useUserStore().getInfo().then((res) => {
                    let data = res.data
                    formData.value.customerName = data.customerName
                    formData.value.customerType = data.customerType
                    formData.value.realRemark = data.realRemark
                    formData.value.rvalue = data.rvalue
                    formData.value.rmfLabel = data.rmfLabel
                })
            }, 3000)
        }
    })
}

onMounted(() => {
    getUserType()
})
</script>

<style lang="scss" scoped>
.mine-info-label {
    color: rgba(5, 11, 32, 1);
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(226, 232, 240, 1);
    margin-bottom: 24px;
}

.to-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 24px;
    border-top: 1px solid rgba(226, 232, 240, 1);
}

.info-form {

    &::v-deep .el-input__wrapper {
        border-radius: 30px;
    }

    &::v-deep .el-select__wrapper {
        border-radius: 30px;
    }

    &::v-deep .el-form-item__label {
        color: rgba(5, 11, 32, 1);
        font-size: 16px;
        font-weight: 500;
        text-align: left;
        justify-content: flex-start;
    }
}
</style>